<template>
  <div class="jibing-chaxun">
    <!-- <div class="d-f">
      <input placeholder="请输入想要查询的药品" v-model="inputvalue" autofocus="autofocus" />
      <div class="sousuo" @click="getsearch(page)">搜索</div>
    </div> -->
    <div class="input">
      <input placeholder="请输入想要查询的药品" v-model="inputvalue">
      <span class="sousuo" @click="getsearch(page)">搜索</span>
    </div>
    <div v-show="itemjieguo!='111'">
      <div class="nr" v-show="itemjieguo !== undefined || itemjieguo.length !=0">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div class="box">
            <div
              class="item"
              v-for="(item,index) in itemjieguo"
              :key="index"
              @click="godetails(item.id,item.name)"
            >
              <img :src="item.cover" alt />
              <div class="xinxi">
                <p class="p1">{{item.name}}</p>
                <p class="p2">{{item.character}}</p>
              </div>
            </div>
          </div>
        </van-list>
      </div>

      <div class="nr" v-show="itemjieguo == undefined || itemjieguo.length ==0">
        <div style="margin-top:50px;font-size:16px;text-align:center;">暂无内容</div>
      </div>
    </div>
    <div v-show="itemjieguo=='111'">
      <div class="nr">
        <!-- <div>暂无内容</div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "jibing-search",
  data() {
    return {
      inputvalue: "",
      itemjieguo: "111",
      list: [],
      loading: false,
      finished: false,
      page: 1
    };
  },
  methods: {
    onLoad() {
      // console.log('aaaaaaaaa')

      setTimeout(() => {
        this.page += 1;
        this.getsearch(this.page);
      }, 500);
    },

    // // 跳转药品详情
    // godetails(id){
    //   this.$router.push({name:'look-medicine-details',query: {id:id}}) 
    // },
    // 跳转药品详情
      godetails(id,title){
        this.$router.push({name:'look-medicine-details',query: {id:id,title:title}}) 
      },
    getsearch(page) {
      this.$get("api/gzh_index.php?action=yaopin_list", {
        name: this.inputvalue == "" ? "请输入想要查询的药品" : this.inputvalue,
        page: page,
        limit: 20
      })
        .then(res => {
          this.loading = false;
          if (page == 1) {
            if (res.data.length == 0) {
              this.finished = true;
            } else {
              this.itemjieguo = res.data;
            }
            if (res.data.length > 0 && res.data.length < 20) {
              this.finished = true;
            }
          } else {
            if (res.data.length == 0) {
              this.finished = true;
            } else {
              for (const key in res.data) {
                this.itemjieguo.push(res.data[key]);
              }
            }
            if (res.data.length > 0 && res.data.length < 20) {
              this.finished = true;
            }
          }
        })
        .catch(err => {});
    }
  }
};
</script>

<style scoped>
/* .d-f {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-top: 20px;
}
.jibing-chaxun {
  width: 100%;
  height: 100%;
}

input {
  width: 80%;
  height: 73px;
  outline: none;
  border: 1PX solid #f2f2f2;
  border-radius: 15px;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 26px;
  line-height: 26px;
  font-family: PingFang SC;
  font-weight: 500;
}
.sousuo {
  width: 10%;
  height: 50px;
  font-size: 26px;
  line-height: 50px;
  background-color: rgba(6, 162, 85, 1);
  color: #fff;
  text-align: center;
  border-radius: 10px;
} */
.input {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
  height: 140px;
  position: relative;
  /* text-align: center; */
  background: #06A255;
}
.input input{
  width: 590px;
  height: 73px;
  border-radius: 10px;
  outline:none;
  padding: 0 10px;
  border: none;
  background: #fff;
  box-sizing: border-box;
  margin-top: 30px;
  font-size:26px;
  font-family:PingFang SC;
  font-weight:500;
  
}
.sousuo {
  font-size: 28px;
  color: #fff;
  margin-left: 15px
}
.nr {
  width: 100%;
  height: calc(100% - 140px);
  overflow: hidden;
  overflow-y: scroll;
}
.box{
  width:691px;
  margin: auto;
}
.item{
  width: 100%;
  border-bottom: 1PX solid #EBEBEB;
  display: flex;
  align-items: center;
  padding: 30px 0;
}
.item img{
  width: 160px;
  height: 160px;
  margin-right: 20px;
  background: #ccc;
}
.item .xinxi{
  width: 531px;
}
.p1{
  font-size:30px;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(0,0,0,1);
  line-height:40px;
}
.p2{
  font-size:26px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,1);
  line-height:40px;
  margin-top: 10px;
  /* margin-bottom: 35px; */
}
</style>
<style >
.van-cell {
  font-size: 16px;
  padding: 20px 50px;
}
.van-list {
  height: 90vh;
}
</style>